<template lang="pug">
view.search-bar-box.class.flex(@click="methods._tap")
  aimg(:src="searchIcon")
  input.grow.m-l-15(:disabled="uri.length" :placeholder="placeholder" placeholder-class="placeholder" @input="methods._input" :value="modelValue" confirm-type="search" @confirm="methods._confirm")
  view.mod.clear(@click="methods._clear" v-if="clearBtn && modelValue.length > 0")
    aimg(:src="clearIcon")
</template>
<script>
import {_go} from '/common/script/tip'
export default {// 微信小程序组件默认设置
  options: {
    styleIsolation: 'apply-shared',
    virtualHost: true
  },
  externalClasses: ['class'],
  props: {
    clearIcon: {type: String, default: ''},
    searchIcon: {type: String, default: ''},
    clearBtn: {type: Boolean, default: true},
    searchBtn: {type: Boolean, default: false},
    searchBtnText: {type: String, default: '搜索'},
    placeholder: {type: String, default: '请输入搜索内容'},
    modelValue: {type: String, default: ''},
    uri: {type: String, default: ''}, // 如果只是点击组件跳转到相关搜素页
  },
  emits: ['update:modelValue', 'search'],
  setup(props, {emit}){
    const methods = {
      _input(e){
        const {value} = e.detail
        emit('update:modelValue', value)
      },
      _confirm(e){
        emit('search', e.target.value)
      },
      _clear(){
        emit('update:modelValue', '')
        emit('search', '')
      },
      _tap(){
        if(props.uri) _go(props.uri)
      }
    }
    return {
      methods
    }
  }
}
</script>
<style lang="scss" scoped>
@use '/common/scss/mixin.scss' as *;
.search-bar-box{
  --aimg-width: 36rpx;
  margin: var(--search-bar-margin-top, 0) var(--search-bar-margin-right, 0) var(--search-bar-margin-bottom, 0) var(--search-bar-margin-left, 0);
  @include bg(var(--search-bar-bgcolor, #fff));
  padding: var(--search-bar-padding, 0 25rpx);
  height: var(--search-bar-height, 80rpx);
  border-radius: var(--search-bar-radius, 50px);
  .clear{
    margin-right: -25rpx;
  }
}
</style>